<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon " type="images/x-icon" href="/static/images/favicon.ico">
    <link rel="stylesheet" href="/static/css/login.css" />
    <style>
        body{
            height: 100%;
            min-height: 558px;

        }
        footer{
            margin-top: 200px;
        }
        .login a{
            float: right;
            margin-right: 12%;
        }
        .login button{
            margin-top: 15px;
        }
    </style>
    <link rel="stylesheet" href="/static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/static/css/inputEffect.css"/>
    <link rel="stylesheet" href="/static/css/tooltips.css" />
    <link rel="stylesheet" href="/static/css/spop.min.css" />
    <#include "../share/top.ftl">
    <script src="/static/js/jquery.pure.tooltips.js" ></script>
    <script src="/static/js/spop.min.js" ></script>
    <script src="/static/js/test.js"></script>
    <script>
        (function() {
            if (!String.prototype.trim) {
                (function() {
                    // Make sure we trim BOM and NBSP
                    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                    String.prototype.trim = function() {
                        return this.replace(rtrim, '');
                    };
                })();
            }
            [].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
                // in case the input is already filled..
                if( inputEl.value.trim() !== '' ) {
                    classie.add( inputEl.parentNode, 'input--filled' );
                }
                // events:
                inputEl.addEventListener( 'focus', onInputFocus );
                inputEl.addEventListener( 'blur', onInputBlur );
            } );
            function onInputFocus( ev ) {
                classie.add( ev.target.parentNode, 'input--filled' );
            }
            function onInputBlur( ev ) {
                if( ev.target.value.trim() === '' ) {
                    classie.remove( ev.target.parentNode, 'input--filled' );
                }
            }
        })();
    </script>
</head>
<body>
<div id="login" style="z-index: 50;">
    <input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked/>
    <input id="tab-2" type="radio" name="tab" class="sign-up hidden" hidden/>
    <input id="tab-3" type="radio" name="tab" class="sign-out hidden" hidden/>
    <div class="wrapper">
        <!-- 登录页面 -->
        <div class="login sign-in-htm">
            <form class="container offset1 loginform" style="z-index: 50">
                <div class="pad input-container">
                    <section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username"
                                       autocomplete="off" placeholder="请输入用户名" tabindex="1" maxlength="18" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                        <br/>
                        <span class="input input--hideo" style="z-index: 50">
								<input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
                    </section>
                </div>
                <div class="form-actions">
                    <input class="btn btn-primary" type="button"  onClick="login()" value="登录"
                           style="color:white;"/>
                </div>
            </form>
        </div>
    </div>
</div>
<footer style="position: absolute;left: 0;bottom:0;right: 0">
    <#include "../share/foot.ftl">
</footer>
<script>
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
    $(function (){
        var flag = IsPC(); //true为PC端，false为手机端
        if (!flag){
            //alert("手机端");.
            var style = document.createElement("style");
            style.type = "text/css";
            try{
                style.appendChild(document.createTextNode("#tops{position: fixed;\n" +
                    "            left: 0;\n" +
                    "            right: 0;\n" +
                    "            top: 0;" +
                    "           z-index:51;" +
                    "}" +
                    "#login{" +
                    "margin-top:30%" +
                    "}" +
                    ""));

            }catch(ex){
                style.styleSheet.cssText = "body{background-color:red}";//针对IE
            }
            var head = document.getElementsByTagName("head")[0];
            sess=2;
            head.appendChild(style);
        }else {
            sess=1;
            var styles = document.createElement("style");
            styles.type = "text/css";
            styles.appendChild(document.createTextNode(
                "#login{" +
                "margin-top:4%" +
                "}" +
                ""));
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(styles);
            //alert("PC端");
        }
    })
    function login(){//登录
        var s="";
        var username = $("#login-username").val(),
            password = $("#login-password").val(),
            validatecode = null,
            flag = false;
        //判断用户名密码是否为空
        if(username == ""){
            $("#usm").show();
            $.pt({
                target: $("#login-username"),
                position: 't',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名不能为空"
            });
            flag = true;
        }
        if(password == ""){
            $("#psd").show();
            $.pt({
                target: $("#login-password"),
                position: 't',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"密码不能为空"
            });
            flag = true;
        }
        if(username.length>18){
            $.pt({
                target: $("#login-username"),
                position: 't',
                align: 't',
                width: 'auto',
                height: 'auto',
                content:"用户名必须为18位以下的字母或数字或汉字"
            });
            flag = true;
        }
        if(flag){
            return false;
        }else{//登录
            $.ajax({
                url:'/tj/test',
                type:"POST",
                data:{username:username,password:password,sess:sess},
                success:function (data) {
                    if (data.status=="true"){
                        //alert(data.msg);
                        if (data.msg=="/dw/?sess=2"){
                            $.pt({
                                target: $("#login-password"),
                                position: 't',
                                align: 't',
                                width: 'auto',
                                height: 'auto',
                                content:'手机端暂不可登录企业用户，请用电脑访问'
                            });
                        }else {
                            location.href=data.msg;
                        }
                    } else {
                        $.pt({
                            target: $("#login-password"),
                            position: 't',
                            align: 't',
                            width: 'auto',
                            height: 'auto',
                            content:data.msg
                        });
                    }

                }
            })
            return false;
        }
    }

</script>
</body>
</html>
